<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>自动聚焦指令</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" name="" v-focus="true" value="" v-model="name">
    </div>

    <script>
        Vue.directive('focus', {
            bind: function(el, binding) {
                console.log('指定绑定，值：' + binding.value);
            },
            inserted: function(el, binding, vnode, oldVnode) {
                console.log('被绑定元素插入父节点');
                el.focus()
            },
            update: function(el, binding) {
                console.log('元素更新:' + binding);
            },
            componentUpdated: function(el) {},
            unbind: function(el) {
                console.log('解除绑定');
            }
        })
        new Vue({
            el: '#app',
            data: {
                name: ''
            }
        })
    </script>
</body>

</html>
